<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>魔豆素材网</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/shouhui.css" />
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#popForm .layui-form-label{
				padding: 9px 0;
				width: 76px;
				box-sizing: border-box;
				text-align: left;
				border-radius: 6px;
			}
			#popForm .layui-form-select .layui-input{
				border-radius: 6px;
				width: 205px;
			}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<header class="header">
			<div class="header-inner w-m clearfix">
				<div class="logo"><img src="img/logo.png" alt=""></div>
				<ul class="nav clearfix" style="margin-left: 15px;">				
					<li><a href="modou.html">首页</a></li>
					<li><a href="tuku.html" >原创图库</a></li>
					<li><a href="shouhui.html" class="active">手绘定制</a></li>
				</ul>
				<div class="search">
					<span class="fenlei">分类<img src="img/xiala.png" alt="">
					<ul class="xiala">
						<li>梦幻小说</li>
						<li>都市小说</li>
						<li>男频封面</li>
						<li>素锦封面</li>
						<li>校园封面</li>
						<li>梦幻小说</li>
					</ul>
					</span>					
					<span class="text">
						<!-- <span>小说首页<i class="layui-icon layui-icon-close" onclick="close()"></i></span> -->
						<input type="text">
					</span>
					<button class="button"><img src="img/search.png" ></button>
				</div>
				<!-- 已登录 -->
				<div class="user clearfix" style="display: none;">
					<img src="img/tx.png" >
					<span>
						张灵灵<br/>
						<font>ID:235342</font>
					</span>
				</div>
				<!-- 未登录 -->
				<div class="reg">
					<a href="login-register.html">登录</a> / <a href="login-register.html">注册</a>
				</div>
			</div>			
		</header>
		<!-- banner -->
		<div class="banner">
			<div class="w-m anniu">
				<button type="button" id="fabu" class="button"><img src="img/doc.png">任务发布</button>
				<button type="button" id="huashi" class="button"><img src="img/seban.png">成为画师</button>
			</div>
		</div>
		<!-- 三个特点 -->
		<div class="middle">
			<ul class="clearfix w-m">
				<li class="item">
					<img src="img/deng.png">
					<p>
						<span>原创手绘</span><br>
						<span>作品严格审核</span>
					</p>
				</li>
				<li class="item">
					<img src="img/biao.png">
					<p>
						<span>快速合作</span><br>
						<span>24小时出图</span>
					</p>
				</li>
				<li class="item">
					<img src="img/xinyu.png">
					<p>
						<span>信誉保证</span><br>
						<span>拒绝盗版，全额赔付</span>
					</p>
				</li>
			</ul>
		</div>
		<div class="wrap">
			<div class="w-m">
				<!-- 内容一区域 -->
				<div class="list1">
					<div class="title">
						<img src="img/huangguan.png" alt="">
						<span>尖端绘制</span>
						<a href="" class="more">更多 <i class="layui-icon layui-icon-right"></i></a>
					</div>
					<div class="content clearfix">
						<div class="content-l">
							<div class="tx"><img src="img/wlh.png"></div>
							<p>
								<span class="huizhang1">初级美工</span>
							</p>
						</div>
						<div class="content-c">
							<p class="name">王力宏</p>
							<p class="jieshao">画手介绍：魔豆推荐画手，曾设计过xxx、xxx封面</p>
							<p class="zuopin">封面作品 <span>265</span> 个</p>
							<p class="anniu"><a href="">进入专栏</a><a href="">留言给TA</a></p>
						</div>
						<div class="content-r">
							<p>最新的小说封面作品</p>
							<ul class="clearfix">
								<li class="item">
									<a href=""><img src="img/fengmian.png" alt=""></a>									
								</li>
								<li class="item">
									<a href=""><img src="img/fengmian.png" alt=""></a>	
								</li>
								<li class="item">
									<a href=""><img src="img/fengmian.png" alt=""></a>	
								</li>
								<li class="item">
									<a href=""><img src="img/fengmian.png" alt=""></a>	
								</li>
								<li class="item">
									<a href=""><img src="img/fengmian.png" alt=""></a>	
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- 内容二区域 -->
				<div class="list2">
					<div class="title">
						<img src="img/zan.png" alt="">
						<span>优选绘制</span>
					</div>
					<div class="content">
						<div class="box">
							<div class="box-title clearfix">
								<div class="left">
									<img src="img/chuangyi.png">
									<div class="rate">
										<span>尖尖上创意</span><br>
										<div class="test" id="test1"></div>
										<span>共 <font class="col1">256</font> 条评价</span>
									</div>
								</div>
								<div class="right">
									<button type="button" class="yaoqing">邀请</button>
								</div>
								<div class="right"></div>
							</div>
							<ul class="pic pic1 clearfix">
								<li>
									<a href=""><img src="img/c1.png"></a>
								</li>
								<li>
									<a href=""><img src="img/c2.png"></a>
								</li>
								<li>
									<a href=""><img src="img/c3.png"></a>
								</li>
								<li>
									<a href=""><img src="img/c4.png"></a>
								</li>
							</ul>
						</div>
						<div class="box">
							<div class="box-title clearfix">
								<div class="left">
									<img src="img/shouhui.png">
									<div class="rate">
										<span>本意手绘工作室</span><br>
										<div class="test" id="test2"></div>
										<span>共 <font class="col1">256</font> 条评价</span>
									</div>
								</div>
								<div class="right">
									<button type="button" class="yaoqing">邀请</button>
								</div>
								<div class="right"></div>
							</div>
							<ul class="pic pic2 clearfix">
								<li>
									<a href=""><img src="img/c1.png"></a>
								</li>
								<li>
									<a href=""><img src="img/c2.png"></a>
								</li>
								<li>
									<a href=""><img src="img/c3.png"></a>
								</li>
								<li>
									<a href=""><img src="img/c4.png"></a>
								</li>
							</ul>
						</div>
						<div class="box">
							<div class="box-title clearfix">
								<div class="left">
									<img src="img/shangxing.png">
									<div class="rate">
										<span>上行手绘工作室</span><br>
										<div class="test" id="test3"></div>
										<span>共 <font class="col1">256</font> 条评价</span>
									</div>
								</div>
								<div class="right">
									<button type="button" class="yaoqing">邀请</button>
								</div>
								<div class="right"></div>
							</div>
							<ul class="pic pic3 clearfix">
								<li>
									<a href=""><img src="img/c1.png"></a>
								</li>
								<li>
									<a href=""><img src="img/c2.png"></a>
								</li>
								<li>
									<a href=""><img src="img/c3.png"></a>
								</li>
								<li>
									<a href=""><img src="img/c4.png"></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div id="demo7" style="text-align: center;margin-top: 40px;"></div>
		</div>
	
		<!-- 底部 -->
		<footer class="footer">
			<ul class="nav">
				<li><a href="">关于我们</a></li>
				<li><a href="">友情链接</a></li>
				<li><a href="">个人会员版</a></li>
				<li><a href="">隐私协议</a></li>
				<li><a href="">服务条款</a></li>
				<li><a href="">联系我们</a></li>
				<li><a href="">加入我们</a></li>
			</ul>
			<p class="flink">
				<a href="">联合推广 market@163.com</a>
				<a href="">友链交换 market@163.com</a>
			</p>
			<p class="ewm"><img src="img/ewm.png"></p>
			<a href="" class="beian">Copyright © 2017 MIUI 京ICP备10046444号 | 京公网安备11010802020134号 | 京ICP证110507号</a>
		</footer>
		<!-- 弹窗 -->
		<div class="tc">
		
				<div class="innerTc">
					<div class="tcHead">
						<h1>制作封面</h1>
						<p>请认真填写定制单,以便设计师能够准确的了解你的小说情况好量身定制</p>
					</div>
					<div class="tcBottom">
						<div>
							<span>小说名字</span>
							<input type="text">
						</div>
						<div>
							<span>小说作者</span>
							<input type="text">
							<span style="margin:0 29px 0 19px;">QQ</span>
							<input type="text">
						</div>
						<div class="clearfix">
							<span>小说类型</span>
							<ul class="clearfix tcchoose">
								<li class="xstype">玄幻</li>
								<li>奇幻</li>
								<li>武侠</li>
								<li>仙侠</li>
								<li>都市</li>
								<li>言情</li>
								<li>历史</li>
								<li>军事</li>
								<li>竞技</li>
								<li>科幻</li>
								<li>灵异</li>
								<li>同人</li>
								<li>漫画</li>
								<li>二次元</li>
								<li>其他</li>
							</ul>
						</div>
						<div>
							<span>小说地址</span>
							<input type="text">
						</div>
						<div>
							<span>小说简介</span>
							<input type="text">
						</div>
						<form class="layui-form" action="#" style="margin-top: 10px;" id="popForm">
							<div class="layui-form-item">
								<label class="layui-form-label">指定画师</label>
								<div class="layui-input-inline">
									<select name="huashi">
										<option value="">请选画师</option>
										<option value="王大锤">王大锤</option>
										<option value="赵铁柱">赵铁柱</option>
										<option value="宫本午餐">宫本午餐</option>
									</select>
								</div>
							</div>
						</form>
						<p class="tijiao">提交申请</p>
						<div style="height: 20px;"></div>
					</div>
				</div>
			

		</div>

		<script type="text/javascript" charset="utf-8">
			layui.use(['jquery', 'element', 'rate','layer','laypage','form'], function() {
				var $ = layui.$,
					rate = layui.rate,
					layer = layui.layer,
					laypage = layui.laypage,
					form = layui.form,
					element = layui.element;

				rate.render({
					elem: '#test1',
					value: 4,
					readonly: true
				});
				rate.render({
					elem: '#test2',
					value: 4,
					readonly: true
				});
				rate.render({
					elem: '#test3',
					value: 4,
					readonly: true
				});
				// 分页
				laypage.render({
					elem: 'demo7',
					count: 354,
					layout: ['prev', 'page', 'next', 'count', 'skip'],
					groups: 8,
					jump: function(obj) {
						console.log(obj)
					}
				});
				// 显示弹窗
				$(".yaoqing").click(function(){
					$(".tc").show();
				})
				// 提交弹窗内容
				$(".tijiao").click(function(event){					
					layer.alert("提交成功！")
					$(".tc").hide();					
				})
				// 阻止冒泡
				$(".innerTc").click(function(event){
					event.stopPropagation();
				})
				// 点击空白处关闭弹窗
				$(".tc").click(function(event){
					event.stopPropagation();
					$(".tc").hide();
				})
				// 筛选
				$(".tcchoose li").click(function(){
					$(this).siblings().removeClass("xstype");
					$(this).addClass("xstype");
				})
				
				$('#fabu').click(function(){
					layer.alert("任务发布……")
				})
				$('#huashi').click(function(){
					layer.alert("后续功能开发中，敬请期待……")
				})
				  // 搜索框
				  $(".xiala li").click(function(){
					  $(".text").html('<span>'+$(this).text()+'<i class="layui-icon layui-icon-close"></i></span>');
				  })
				  
				  $(".text").on('click','.layui-icon-close',function(){
					  $(".text").html('<input type="text">');
				  })
				  
				  // 获取所搜词
				  $(".search .button").click(function(){
					  var search=$(".text span").text()||$(".text input").val();
					  if(search.length>0){
						  console.log(search)
						  window.open("search.html")
					  }else{
						  layer.tips('请输入搜索词', '.text', {tips: [3, '#00cc90'],time:1500, anim: 6});
						  return false;
					  }
				  })
			});
		</script>
	</body>
</html>
